<template>
<div class="login" id="login">
	<div class="title-container">
		<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" class="logo" alt="">
		<div class="title">CMS系统</div>
	</div>
	<div class="sub-title">
		这可能是最好的CMS系统
	</div>
	<div class="login-form">
		<el-input
			@keyup.native.enter.prevent="login"
			placeholder="请输入账号"
			prefix-icon="fa fa-user"
			v-model="account">
		</el-input>
		<el-input
			@keyup.native.enter.prevent="login"
			style="margin-top: 10px;"
			placeholder="请输入密码"
			prefix-icon="fa fa-lock"
			type="password"
			v-model="password">
		</el-input>
		<div class="login-options-container">
			<el-checkbox v-model="remember">自动登录</el-checkbox>
			<a href="javascript:;">忘记密码</a>
		</div>
		<el-button :loading="pendingLogin" class="login-btn" type="primary" @click="login">登录</el-button>
	</div>
	<div class="copy-right">
		© 2019 Thyiad, made with love for a better web
	</div>
</div>
</template>

<script>

	import {toast, post} from '../api/common'
	import * as url from '../api/url'
	import auth from '../util/auth';

export default {
  name: 'Login',
  data(){
  	return {
  		account: '',
  		password: '',
		remember: true,
		pendingLogin: false,
  	}
  },
	methods:{
		login(){
			if(!this.account){
				toast('请输入账号', 'error')
				return;
			}
			if(!this.password){
				toast('请输入密码', 'error')
				return;
			}
			this.pendingLogin=true;
			post(url.LOGIN, {account: this.account, password: this.password}).then((data)=>{
				auth.setToken(data);
				this.$router.push(this.$route.query.redirect || '/');
				toast('登录成功')
				this.pendingLogin=false;
			}).catch(err=>{
				this.pendingLogin=false;
			})
		}
	},
  mounted() {

  }

}
</script>

<style lang="scss">
	#login{
		width: 100%;
		height: 100%;
		background-image: url('../assets/lock.jpg');
		background-position: center;
		-webkit-background-size: cover;
		background-size: cover;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		.title-container{
			margin-top: 100px;
			display: flex;
			flex-direction: row;
			align-items: center;
			.logo{
				width: 45px;
				height: 45px;
			}
			.title{
				color: rgba(0,0,0,.85);
				font-weight: 600;
				font-size: 33px;
				margin-left: 15px;
			}
		}
		.sub-title{
			margin-top: 12px;
			margin-bottom: 44px;
			font-size: 14px;
			color: rgba(0,0,0,.45);
		}
		.login-form{
			max-width: 380px;
			flex: 1;
		}
		.copy-right{
			margin-bottom: 15px;
			text-align: center;
			color: white;
		}
	}
	.login-options-container{
		margin-top: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		a{
			text-decoration: none;
			color: #409EFF;
		}
	}
	.login-btn{
		margin-top: 15px;
		width: 100%;
	}
</style>
